import { MaterialIcons } from "@expo/vector-icons";
import React, { useState } from "react";
import {
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from "react-native";
import ColorPicker from "react-native-wheel-color-picker";

interface FrameEditorProps {
  onFrameSelect: (frame: FrameStyle) => void;
  onFrameCustomize: (settings: FrameSettings) => void;
  currentTab?: "preset" | "custom";
}

export interface FrameStyle {
  id: string;
  name: string;
  type: 'border' | 'shadow' | 'rounded' | 'decorative';
  borderWidth?: number;
  borderColor?: string;
  cornerRadius?: number;
  shadowEnabled?: boolean;
  shadowColor?: string;
  shadowOpacity?: number;
  shadowOffset?: { x: number; y: number };
  shadowRadius?: number;
  preview?: string;
}

export interface FrameSettings {
  borderWidth: number;
  borderColor: string;
  cornerRadius: number;
  shadowEnabled: boolean;
  shadowColor: string;
  shadowOpacity: number;
  shadowOffset: { x: number; y: number };
  shadowRadius: number;
}

// 相框预设数据
const framePresets = [
  { key: "none", label: "无边框", icon: "crop-free" },
  { key: "thin", label: "细边框", icon: "crop-square" },
  { key: "thick", label: "粗边框", icon: "crop-square" },
  { key: "rounded", label: "圆角", icon: "crop-square" },
  { key: "shadow", label: "阴影", icon: "crop-square" },
  { key: "vintage", label: "复古", icon: "crop-square" },
  { key: "modern", label: "现代", icon: "crop-square" },
  { key: "elegant", label: "优雅", icon: "crop-square" },
  { key: "bold", label: "粗犷", icon: "crop-square" },
  { key: "minimal", label: "简约", icon: "crop-square" },
];

// 相框自定义数据
const frameCustoms = [
  { key: "border", label: "边框", icon: "border-style" },
  { key: "shadow", label: "阴影", icon: "blur-on" },
  { key: "corner", label: "圆角", icon: "rounded-corner" },
  { key: "color", label: "颜色", icon: "palette" },
  { key: "width", label: "宽度", icon: "straighten" },
  { key: "style", label: "样式", icon: "style" },
];

// 分类标签数据
const CATEGORIES = [
  { id: "preset", name: "预设" },
  { id: "custom", name: "自定义" },
];

export const FrameEditor: React.FC<FrameEditorProps> = ({
  onFrameSelect,
  onFrameCustomize,
  currentTab = "preset",
}) => {
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [selectedColor, setSelectedColor] = useState("#FFFFFF");

  // 渲染预设网格
  const renderPresetGrid = () => (
    <View style={styles.itemGrid}>
      {framePresets.map((preset) => (
        <TouchableOpacity
          key={preset.key}
          style={styles.itemContainer}
          onPress={() => onFrameSelect({
            id: preset.key,
            name: preset.label,
            type: 'border',
            borderWidth: preset.key === 'thick' ? 8 : 2,
            borderColor: '#FFFFFF',
            cornerRadius: preset.key === 'rounded' ? 12 : 0,
            shadowEnabled: preset.key === 'shadow',
            shadowColor: '#000000',
            shadowOpacity: 0.25,
            shadowOffset: { x: 0, y: 2 },
            shadowRadius: 4,
          })}
        >
          <View style={styles.framePreview}>
            <MaterialIcons name={preset.icon as any} size={24} color="#666" />
          </View>
          <Text style={styles.itemLabel}>{preset.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );

  // 渲染自定义网格
  const renderCustomGrid = () => (
    <View style={styles.itemGrid}>
      {frameCustoms.map((custom) => (
        <TouchableOpacity
          key={custom.key}
          style={styles.itemContainer}
          onPress={() => {
            if (custom.key === 'color') {
              setShowColorPicker(true);
            } else {
              onFrameCustomize({
                borderWidth: 8,
                borderColor: selectedColor,
                cornerRadius: 0,
                shadowEnabled: false,
                shadowColor: '#000000',
                shadowOpacity: 0.25,
                shadowOffset: { x: 0, y: 2 },
                shadowRadius: 4,
              });
            }
          }}
        >
          <View style={styles.framePreview}>
            <MaterialIcons name={custom.icon as any} size={24} color="#666" />
          </View>
        </TouchableOpacity>
      ))}
    </View>
  );

  // 获取当前分类的内容
  const getCurrentContent = () => {
    switch (currentTab) {
      case "preset":
        return renderPresetGrid();
      case "custom":
        return renderCustomGrid();
      default:
        return renderPresetGrid();
    }
  };

  return (
    <View style={styles.container}>
      {/* 内容列表 */}
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={styles.contentList}
        contentContainerStyle={styles.contentListContainer}
      >
        {getCurrentContent()}
      </ScrollView>

      {/* 颜色画盘模态框 */}
      {showColorPicker && (
        <View style={styles.colorPickerModal}>
          <View style={styles.colorPickerHeader}>
            <Text style={styles.colorPickerTitle}>选择颜色</Text>
            <TouchableOpacity onPress={() => setShowColorPicker(false)}>
              <MaterialIcons name="close" size={24} color="#666" />
            </TouchableOpacity>
          </View>
          <View style={styles.colorPickerContainer}>
            <ColorPicker
              color={selectedColor}
              onColorChange={(color) => {
                setSelectedColor(color);
              }}
              thumbSize={30}
              sliderSize={30}
              noSnap={true}
              row={false}
            />
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
  },

  contentList: {
    backgroundColor: "#fff",
    maxHeight: 300,
  },
  contentListContainer: {
    paddingHorizontal: 10,
    paddingTop: 12,
  },
  itemGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
  },
  itemContainer: {
    alignItems: "center",
    width: "20%",
    marginBottom: 16,
  },
  framePreview: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
    position: "relative",
  },
  itemLabel: {
    fontSize: 12,
    color: "#666",
    textAlign: "center",
  },
  colorPickerModal: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 1000,
  },
  colorPickerHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingVertical: 15,
    backgroundColor: "#fff",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  colorPickerTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: "#333",
  },
  colorPickerContainer: {
    backgroundColor: "#fff",
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    padding: 20,
    height: 300,
  },
});
